<script setup lang="ts">
import type { Ref } from 'vue'
import { Logo, Menu } from '../../components'
import { NLayout, NLayoutSider } from 'naive-ui'

const isOpen = inject<Ref<boolean>>('isOpen')
</script>

<template>
  <div class="ipad">
    <Logo />
    <n-layout has-sider class="scroll">
      <n-layout-sider
        bordered
        show-trigger
        :collapsed="!isOpen"
        collapse-mode="width"
        :collapsed-width="64"
        :width="200"
      >
        <Menu />
      </n-layout-sider>
    </n-layout>
  </div>
</template>

<style scoped lang="scss">
.ipad {
  height: 100%;
  background: var(--yang-menu-navone-bg-color);
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  .scroll {
    flex: 1 0 0;
    background: var(--yang-menu-navone-bg-color);
  }
}
</style>
<style lang="scss">
.n-layout-sider {
  background: var(--yang-menu-navone-bg-color) !important;
}
.n-layout-toggle-button,
.n-layout-sider__border {
  display: none !important;
}
</style>
